<!--
	* @author  gaohailan
  * @desc 创新成果 分类 新增编辑
-->
<template>
  <div class="innovationAchievementClassifyEdit">
    <div class="main-title">新建/编辑</div>
    <el-form
        ref="dataForm"
        v-loading="formloading"
        :model="temp"
        :rules="rules"
        class="dataForm"
        label-position="right"
        label-width="120px"
    >
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="temp.name" maxlength="20" style="width: 50%" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="temp.status" placeholder="请选择" style="width: 220px">
          <el-option key="0" :value="0" label="启用" />
          <el-option key="1" :value="1" label="禁用" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button style="padding: 8px 30px;" @click="cancel">取消</el-button>
      <el-button style="padding: 8px 30px;" type="primary" @click="insertOrUpdate">确定</el-button>
    </div>
  </div>
</template>

<script>
// import { int } from '@/utils/validate'
import { mapGetters } from 'vuex'
// import { getToken } from '@/utils/auth'
import waves from '@/directive/waves' // Waves directive
import { get, insert, update } from '../api.js'
import {int, specialText} from '@/utils/validate'
export default {
  name: 'InnovationAchievementClassifyEdit',
  components: {},
  directives: { waves },
  data() {
    return {
      formloading: false,
      state: 'create',
      temp: {
        id: '',
        name: '',
        status: 0,
        parentId: '-1'
      },
      rules: {
        name: [{ required: true, message: '请填写分类名称', trigger: 'blur' },
          { validator: specialText, trigger: 'blur' }
        ],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
    this.state = this.$route.query.type === 'c' ? 'create' : 'update'
    if (this.$route.query.type === 'u') {
      this.infoId = this.$route.query.i || ''
      this.getInfo(this.infoId)
    }
  },
  methods: {
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: '#ffffff'
      }
    },
    /*
    * 保存
    * */
    insertOrUpdate() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.1)'
          })
          if (this.state === 'create') {
            return new Promise((resolve, reject) => {
              insert(this.temp).then(() => {
                loading.close()
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 1500
                })
                this.$router.push({ path: '/innovationStudio/innovationCategory/index' })
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })
          } else {
            this.temp.id = this.infoId
            const query = {
              id: this.temp.id,
              name: this.temp.name,
              parentId: this.temp.parentId,
              status: this.temp.status
            }
            return new Promise((resolve, reject) => {
              update(query).then(() => {
                loading.close()
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 1500
                })
                this.$router.push({ path: '/innovationStudio/innovationCategory/index' })
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })
          }
        }
      })
    },
    /**
     * 取消返回首页
     */
    cancel() {
      this.$router.push({ path: '/innovationStudio/innovationCategory/index' })
    },
    /**
     * 获取活动详情
     */
    getInfo(id) {
      return new Promise((resolve, reject) => {
        get({ id: id }).then(res => {
          if (res.data.code === '200') {
            this.temp = res.data.data
          }
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>

<style lang="scss">
$mainColor: #18a5fd;
.innovationAchievementClassifyEdit {
  background-color: #fff;
  padding: 40px;
  .select-data{
    display: inline-block;
    background:rgba(246,246,246,1);
    border-radius:4px;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    padding: 0 10px;
    margin-right: 5px;
    i{
      cursor: pointer;
      padding-left: 5px;
    }
  }
  .selectbtn{
    display: inline-block;
    width: 120px;
    background:rgba(255,255,255,1);
    border:1px dotted $mainColor;
    border-radius:4px;
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:$mainColor;
    text-align: center;
    cursor: pointer;
  }
  .dialog-footer{
    text-align: center;
  }
  .main-title{
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #E5E5E5;
    font-family:PingFangSC-Medium;
    font-weight: bold;
    color:rgba(51,51,51,1);
    font-size: 14px;
    &:before{
      content: "";
      position: absolute;
      width: 2px;
      background-color: $mainColor;
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }
  .dataForm{
    width: 800px;
    margin: 20px auto 0;
  }
}
</style>
